<template>
  <div>
    <el-card shadow="never">
      <header-title title="合同管理"></header-title>
    </el-card>
    <el-card shadow="never">
      <el-row>
        <el-col :span="20">
          <div>
            合同状态:<el-select v-model="status" @change="changeStatus" placeholder="请选择" size="small" style="margin: 0 15px 0 15px;width: 200px;">
            <el-option :key="0" label="全部" :value="0"></el-option>
            <el-option :key="1" label="正常" :value="1"></el-option>
            <el-option :key="2" label="合同作废" :value="2"></el-option>
            <el-option :key="3" label="合同解除" :value="3"></el-option>
          </el-select>
            <el-button @click="search" class="button" size="small" round icon="el-icon-search">查询</el-button>
          </div>
        </el-col>
        <el-col :span="4">
          <!--<el-button @click="add" class="button" size="small" round>新增合同</el-button>-->
          <el-button @click="addContract" class="button" size="small" round>新增合同</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="contractData" v-loading="loading" style="width: 100%">
          <el-table-column prop="businessName" label="商户名称"></el-table-column>
          <el-table-column prop="stallName" label="摊位名称"></el-table-column>
          <el-table-column prop="signDate" label="签订日期"></el-table-column>
          <!-- <el-table-column prop="months" label="年限(年)"></el-table-column> -->
          <el-table-column prop="dueTime" label="到期时间"></el-table-column>
          <!-- <el-table-column prop="contractAmount" label="合同金额(元)"></el-table-column> -->
          <el-table-column prop="contractNumber" label="编号"></el-table-column>
          <el-table-column prop="contractStatus" label="合同状态"></el-table-column>
          <!-- <el-table-column prop="createdAt" label="创建时间"></el-table-column> -->
          <el-table-column prop="diffDay" label="日期差"></el-table-column>
          <el-table-column fixed="right" label="操作" width="225">
            <template slot-scope="scope">
              <el-button @click="changeContractRemove(scope.row)" :disabled="scope.row.contractStatus === '合同作废' || scope.row.contractStatus === '合同解除'" type="text" >合同解除</el-button>
              <!--style="color:#f7674a;" style="color:#f8874a;"-->
              <el-button @click="changeContractinvalid(scope.row)" :disabled="scope.row.contractStatus === '合同作废' || scope.row.contractStatus === '合同解除'" type="text" >合同作废</el-button>
              <el-button @click="editContract(scope.row)" :disabled="scope.row.contractStatus === '合同作废' || scope.row.contractStatus === '合同解除'" type="text" style="color:#3dc2c2;">合同续签</el-button>
              <!--<el-button @click="contractDetails(scope.row)" type="text" style="color:#3dc2c2;">详情</el-button>-->
            </template>
          </el-table-column>
          <div slot="empty"><img src="../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
        </el-table>
        <el-pagination
          :page-size="perPage"
          :current-page="page"
          :total="total"
          @current-change="changeContractPage"
          style="margin-top: 15px;"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog title="填写合同信息" :visible.sync="contractDialog" @close="close">
      <div>
        <el-form :model="modal" label-width="100px">
          <el-form-item label="签订日期" prop="signDate">
            <el-input v-model="modal.signDate"></el-input>
          </el-form-item>
          <el-form-item label="年限(年)" prop="months">
            <el-input v-model="modal.months"></el-input>
          </el-form-item>
          <el-form-item label="到期时间" prop="dueTime">
            <el-input v-model="modal.dueTime"></el-input>
          </el-form-item>
          <el-form-item label="商户名称" prop="businessName">
            <my-select ref="bmySelect" url="api/v1/backend/public/business" @selected='mySelectedBusinessName'></my-select>
          </el-form-item>
          <el-form-item label="摊位名称" prop="stallName">
            <el-input v-model="modal.stallName"></el-input>
          </el-form-item>
          <el-form-item label="合同金额(元)" prop="contractAmount">
            <el-input v-model="modal.contractAmount"></el-input>
          </el-form-item>
          <el-form-item label="编号" prop="contractNumber">
            <el-input v-model="modal.contractNumber"></el-input>
          </el-form-item>
          <el-form-item label="合同照片" prop="photoUrl">
            <!-- 需要改成可以上传多个照片的那样 -->
            <el-row>
              <el-col :span="5">
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-col>
              <el-col :span="19">
                <el-input v-model="modal.photoUrl" size="medium"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">提交合同信息</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import MySelect from "@/components/MySelect"
import { isNil, formatDate, formatDate2 } from "@/utils"
export default {
  name: 'Contract',
  components: {
     HeaderTitle,
     MySelect
  },
  data(){
    return {
      status: 0,
      businessId: 0,
      loading: true,
      contractData: [],
      perPage: 10, // 每页显示10条
      page: 1, // 当前页
      total: 0,
      contractDialog: false,
      modal: {},
      contractPhoto: []
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      this.getContractList(this.status, this.perPage, this.page)
    }
  },
  mounted(){
    this.getContractList(this.status, this.perPage, this.page)
  },
  methods:{
    defaultValue (value, defaultValue) {
      if (isNil(value)) {
        return defaultValue
      }
      return value
    },
    // 改变合同状态
    changeStatus(val){
      this.status = val
    },
    // 获取合同管理数据
    getContractList(status,perPage,page){
      this.$store.dispatch('contract/fetchContractData',{status,perPage,page}).then(
        data => {
          this.loading = false
          for(let i = 0; i < data.items.length; i++){
            data.items[i].contractAmount = data.items[i].contractAmount / 100
          }
          for(let i = 0; i < data.items.length; i++){
            if(data.items[i].contractStatus === 1){
              data.items[i].contractStatus = '正常'
            }else if(data.items[i].contractStatus === 2){
              data.items[i].contractStatus = '合同作废'
            }else if(data.items[i].contractStatus === 3){
              data.items[i].contractStatus = '合同解除'
            }
          }
          for(let i = 0; i < data.items.length; i++){
            if(data.items[i].diffDay < 0){
              data.items[i].diffDay = '正常'
            }else if(data.items[i].diffDay <= 30){
              data.items[i].diffDay = '即将过期'
            }else if(data.items[i].diffDay > 30){
              data.items[i].diffDay = '已经过期'
            }
          }
          this.contractData = data.items
          this.total = data.total
        }
      ).catch(err => {
        this.loading = false
        this.contractData = []
        this.total = 0
      })
    },
    search(){
      this.page = 1
      this.getContractList(this.status, this.perPage, this.page)
    },
    changeContractPage(num){
      this.page = num
      this.getContractList(this.status, this.perPage, num)
    },
    // 点击新增合同
    add(){
      this.contractDialog = true
      const renewContractId = 0
      this.modal = Object.assign({renewContractId: renewContractId},this.modal)
    },
    close(){
      this.clear()
    },
    clear(){
      this.modal = {}
    },
    mySelectedBusinessName(obj){
      this.modal.businessId = obj.value
      this.modal.businessName = obj.label
    },
    // 提交合同
    submit(){
      this.modal.contractAmount = this.modal.contractAmount * 100
      // 把上传的多张图片地址放在一个数组里，然后构造成要求的那样
      let contractPs = ['地址1','地址2','地址3']
      // let contractPs = []
      // contractPs.push(this.modal.photoUrl)
      for(var i = 0; i < contractPs.length; i++){
        this.contractPhoto.push({
          photoUrl: contractPs[i]
        })
      }
      this.modal = Object.assign({contractPhoto: JSON.stringify(this.contractPhoto)},this.modal)
      this.contractDialog = false
      this.$store.dispatch("contract/submit", this.modal).then(data=>{
        if(data){
          this.$message({
            type: 'success',
            message: '操作成功，请刷新！'
          })
        }
        this.getContractList(this.status, this.perPage, this.page)
        this.clear()
      }).catch(err => {
        this.contractDialog = false
        this.clear()
      })
    },
    // 点击合同解除
    changeContractRemove(row){
      const contractId = row.id
      const status = 3
      this.getContractStatus(contractId,status)
    },
    // 点击合同作废
    changeContractinvalid(row){
      const contractId = row.id
      const status = 2
      this.getContractStatus(contractId,status)
    },
    // 根据不同状态 合同解除 合同作废
    getContractStatus(contractId,status){
      this.$store.dispatch("contract/contractRemove", {contractId,status}).then(data=>{
        if(data){
          this.$message({
            type: 'success',
            message: '操作成功，请刷新！'
          })
        }
        this.getContractList(this.status, this.perPage, this.page)
      }).catch(err => {
      })
    },
    // 点击合同续签
    editContract(row){
      console.log(row)
      const contractId = row.id
      const renewContractId = row.id
      this.$router.push({
        path: `contractAdd/${contractId}`,
        query: {
          contractId: contractId,
          renewContractId: renewContractId
        }
      })
      /*this.contractDialog = true
      const contractId = row.id
      const renewContractId = row.id
      // 获取合同详情
      this.$store.dispatch("contract/contractShow", {contractId}).then(data=>{
        this.modal.contractAmount = data.contractAmount / 100
        this.modal = data
        this.modal = Object.assign({renewContractId: renewContractId},this.modal)
      }).catch(err => {
      })*/
    },

    // 查看合同详情
    contractDetails(row){
      console.log(row)
    },

    // 点击 新增 合同
    addContract(){
      this.$router.push({
        path: `contractAdd/add`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
  text-align: center;
}
  /deep/ .el-table__empty-text{
    width: 100%;
  }
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
</style>
